<template>
  <div class="RecycleBin">
    <div style="margin-left: 20px;padding: 10px 20px;">
      <el-input
        placeholder="TriggerID"
        v-model="queryTriggerId"
        style="width: 300px"
        suffix-icon="el-icon-search"
        clearable
      >
      </el-input>
      <el-button type="primary" style="margin-left: 10px" @click="getStrategyList"
        >查询</el-button
      >
    </div>
    <div class="content">
      <div class="strategyContent">
        <TableComponent
          v-loading="isLoading"
          :assetList="strategyList"
          :tableColumns="tableColumns"
          element-loading-text="加载中..."
        >
          <template #id="{ row }">
            <span>T{{ row.id }}</span>
          </template>

          <template #scFlag>
            <el-table-column
              align="left"
              label="策略类型"
              prop="scFlag"
              width="90"
            >
              <template #default="{ row }">
                <span v-if="row.scFlag">SC</span>
                <span v-else>trigger</span>
              </template>
            </el-table-column>
          </template>
          <template #priority>
            <el-table-column
              align="left"
              prop="priority"
              sortable="custom"
              width="120"
            >
              <template v-slot:header>
                优先级
                <el-tooltip
                  class="box-item"
                  effect="light"
                  placement="top-start"
                >
                  <template #content>
                    优先级：1-3 【普通】<br />
                    优先级：4-7 【高优】<br />
                    优先级：8-10【紧急】
                  </template>
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </template>
            </el-table-column>
          </template>

          <template #status>
            <el-table-column
              align="left"
              label="状态"
              prop="status"
              sortable="custom"
              width="80"
            >
              <template #default="{ row }">
                <span v-if="row.status == 0">暂停</span>
                <span v-if="row.status == 1">启用</span>
              </template>
            </el-table-column>
          </template>

          <template #operation="{ row }">
            <el-popconfirm title="确认还原吗？" @confirm="restoreFn(row)"> 
              <template #reference>
                <el-button size="small" type="text">还原</el-button>
              </template>
            </el-popconfirm>
            
            <el-popconfirm title="确定要删除吗?" @confirm="deleteFn(row)">
              <template #reference>
                <el-button style="color: #f00" type="text">彻底删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </TableComponent>
        <el-pagination
          v-model:page-size="strategyPageData.size"
          :currentPage="strategyPageData.current"
          :page-sizes="[10, 20, 30, 40, 50]"
          :total="strategyPageData.total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          style="margin-top: 20px; float: right"
          @size-change="handleSizeChange"
          @current-change="strategyPageChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import TableComponent from "@/components/TableComponent.vue";
import {
  queryDeletedStrategy,
  restoreStrategy,
  permanentDeleteStrategy,
} from "@/api/recycleBinApi.js";
import { RecycleBinsearchConfig, tableColumns } from "@/constant/config.js";
import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";

export default {
  components: {
    TableComponent,
  },
  setup() {
    const strategyPageData = reactive({
      total: 0,
      current: 1,
      size: 10,
    });

    const isLoading = ref(false);
    const strategyList = ref([]);
    let queryTriggerId = ref('')

    const filterQuery = reactive({});
    const getStrategyList = () => {
      queryDeletedStrategy({
        size: strategyPageData.size || 10,
        current: strategyPageData.current || 1,
        id: queryTriggerId.value || null,
      }).then((res) => {
        if (res.data.code == 200) {
          let response = res.data.data;
          strategyList.value = response.records;
          strategyPageData.total = response.total;
          strategyPageData.current = response.current;
        }
      });
    };
    const handleSizeChange = (number) => {
      strategyPageData.size = number;
      getStrategyList();
    };
    const restoreFn = (row) => {
      restoreStrategy({ id: row.id }).then((res) => {
        if (res.data.code == 200) {
          ElMessage.success("还原成功！");
        }
        getStrategyList();
      });
    };
    const deleteFn = (row) => {
        permanentDeleteStrategy({
        id: row.id,
      }).then((res) => {
        if (res.data.data == 1) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });
          getStrategyList();
        } else {
          ElMessage({
            message: "删除失败",
            type: "error",
          });
        }
      });
    };
    onMounted(() => {
      getStrategyList();
    });
    const strategyPageChange = (val) => {
      strategyPageData.current = val;
      getStrategyList();
    };
    return {
      tableColumns,
      strategyList,
      isLoading,
      strategyPageData,
      getStrategyList,
      restoreFn,
      deleteFn,
      strategyPageChange,
      RecycleBinsearchConfig,
      filterQuery,
      handleSizeChange,
      queryTriggerId
    };
  },
};
</script>

<style lang="less" scoped>
.RecycleBin {
  //background: #eeeeee;
  min-height: 100%;

  .content {
    padding: 10px 20px;
    //padding-bottom: 100px;
    .strategyContent {
      background: #ffffff;
      padding: 10px 20px;
    }

    .policyGroupContent {
      margin-top: 20px;
      background: #ffffff;
      padding: 10px 20px;
      padding-bottom: 100px;
    }
  }
}
</style>
